<script setup lang="ts">
import {  ref } from "vue";
import feedbackFormConfig from "./config";
import { useRouter } from "vue-router";
import { formatDate } from "@/utils/lib/date";
import { useUserStore } from "@/store/modules/user";
const router = useRouter()
const userStore = useUserStore()

const formRef = ref()

// 取消
const cancel = () => {
    router.go(-1)
};



// 确认
const confirm = async() => {
    try {
        const instance: Record<string, any> = formRef?.value?.getFormRef();
        instance.validate(async (err) => {
			if (!err) {
				let data = {
					TIME: formatDate(new Date()),
					user_id: userStore.info.user_id,
					...instance.model,
				};
				console.log(data);
				await userStore.feedback(data);
				formRef?.value?.reset()
			} else {
				window.$message.error("发布失败");
			}
		});
	} catch (error) {
		return Promise.reject(error);
	}
};
</script>

<template>
	<div class="feedback-box">
		<div class="title-box">
			<p class="title">发布</p>
		</div>
		<div class="form">
			<Form :config="feedbackFormConfig" ref="formRef" />

			<div class="btns">
				<n-space>
					<n-button @click="cancel" class="btn" strong secondary type="tertiary"
						>取消</n-button
					>
					<n-button @click="confirm" strong secondary type="info" class="btn"
						>确定</n-button
					>
				</n-space>
			</div>
		</div>
	</div>
</template>

<style lang="less" scoped>
@import "@/styles/mixin.less";
.feedback-box {
	border: 1px solid #ccc;
	// height: 100%;
	height: 500px;
	.title-box {
		height: 50px;
		border-bottom: 1px solid #ccc;
		.flex(row,flex-start,center);
		.title {
			color: rgb(3, 180, 170);
			font-size: 20px;
			font-weight: bold;
			margin-left: 15px;
		}
	}
	.form {
		padding: 20px 30px;
	
		.btns {
			.flex(row,flex-end,center);
		}
	}
}

</style>
